<template>
  <div class="AnchorList">
    <el-card>
      <h3><span class="tag"></span> 主播列表</h3>
      <div class="searchBox">
        <!-- <span class="txt">注册时间：</span>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <span class="margin"></span> -->
        <span class="txt">主播昵称：</span>
        <el-input v-model="nickname" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="txt">ID：</span>
        <el-input v-model="userId" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="txt">手机号：</span>
        <el-input v-model="mobile" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="txt">性别：</span>
        <el-select
          class="channelselect"
          v-model="type"
          placeholder="请选性别"
          size="small"
        >
          <el-option label="不限" value=""> </el-option>
          <el-option label="男" value="1"> </el-option>
          <el-option label="女" value="2"> </el-option>
        </el-select>
        <span class="margin"></span>
        <span class="txt">排序方式：</span>
        <el-select
          class="channelselect"
          v-model="sort"
          placeholder="请选排序方式"
          size="small"
        >
          <el-option label="注册时间降序" value="1"> </el-option>
          <el-option label="充值金额降序" value="2"> </el-option>
        </el-select>
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
      </div>
      <div class="typeBox">
        <div class="left">
          <el-radio-group
            v-model="type1"
            size="small"
            @change="search"
            fill="#7b94d8"
          >
            <el-radio-button label="">不限平台</el-radio-button>
            <el-radio-button label="1">IOS</el-radio-button>
            <el-radio-button label="2">Android</el-radio-button>
          </el-radio-group>
          <!-- <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-sort"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>注册时间降序</el-dropdown-item>
              <el-dropdown-item>充值金额降序</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
        <div class="right">
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="date" label="头像">
          <template slot-scope="scope">
            <el-image
              class="avatar"
              :src="scope.row.avatar"
              :preview-src-list="[scope.row.avatar]"
              fit="cover"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="主播ID"> </el-table-column>
        <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
        <el-table-column prop="mobile" label="手机号"> </el-table-column>
        <el-table-column prop="fans" label="粉丝数"> </el-table-column>
        <el-table-column prop="integral" label="积分数"> </el-table-column>
        <el-table-column prop="lastBroadcastTime" label="最后直播时间">
        </el-table-column>
        <el-table-column prop="sex" label="性别"> </el-table-column>
        <el-table-column prop="level" label="等级"> </el-table-column>
        <el-table-column prop="status" label="账号状态"> </el-table-column>
        <el-table-column prop="anchorStatus" label="直播状态">
        </el-table-column>
        <el-table-column prop="utmSource" label="渠道"> </el-table-column>
        <el-table-column prop="address" label="详情">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="look(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- <el-button size="small" class="btn plcz">批量操作</el-button> -->
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { userAnchorUserList } from "@/api/UserManagement";
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      nickname: "",
      userId: "",
      mobile: "",
      type: "",
      sort: "1",
      type1: "",
      tableData: [{ sd: 1 }, { cs: 2 }],
      total: 0,
      page: 1,
      pageSize: 10,
      multipleSelection: [],
    };
  },
  methods: {
    //选择表格
    handleSelectionChange(value) {
      this.multipleSelection = value;
      console.log(this.multipleSelection);
    },
    //通过
    look(obj) {
      this.$router.push({
        path: "/UserManagement/UserDetails",
        query: {
          id: obj.userId,
        },
      });
    },
    async getList() {
      this.loading = true;
      const res = await userAnchorUserList({
        page: this.page,
        pageSize: this.pageSize,
        // startTime
        // endTime
        userId: this.userId,
        nickname: this.nickname,
        mobile: this.mobile,
        sort: this.sort,
      });
      this.loading = false;
      if (res.code == 0) {
        this.total = parseInt(res.data.count);
        this.tableData = res.data.list;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.AnchorList {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .plcz {
    margin-left: 0 !important;
  }
  .el-icon-sort {
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
    border: 1px solid #ccc;
    padding: 5px;
    font-weight: 700;
    border-radius: 50%;
  }
}
</style>